import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class MtBody extends StatefulWidget {
  const MtBody({super.key});

  @override
  State<MtBody> createState() => _MtBodyState();
}

class _MtBodyState extends State<MtBody> {
  /// 食物列表
  List _foodList = [];
  int activeIndex = 0; // 选中索引

  @override
  void initState() {
    super.initState();
    getFoodData();
  }

  /// 获取数据
  getFoodData() async {
    Dio dio = Dio(); // 创建网络请求
    var res =
        await dio.get("https://zhousg.atomgit.net/harmonyos5/takeaway.json");
    setState(() {
      _foodList = res.data as List; // 数据更新
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      decoration: const BoxDecoration(
          // color: Colors.red,
          ),
      child: Stack(
        // 设置对齐方式
        alignment: Alignment.bottomCenter,
        children: [
          _center(),
          _bottom(),
        ],
      ),
    );
  }

  /// 底部
  Widget _bottom() {
    return Positioned(
        child: Container(
            width: double.infinity,
            height: 60,
            margin: const EdgeInsets.only(left: 20, right: 20, bottom: 20),
            padding: const EdgeInsets.only(left: 20),
            decoration: BoxDecoration(
                color: const Color.fromRGBO(0, 0, 0, 0.8),
                borderRadius: BorderRadius.circular(30)),
            child: Row(
              children: [
                const Expanded(
                  child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          "¥ 0.00",
                          style: TextStyle(
                              fontSize: 20,
                              color: Colors.white,
                              fontWeight: FontWeight.bold),
                        ),
                        Text("预估另需配送费 ¥ 0.00元",
                            style: TextStyle(
                              fontSize: 12,
                              color: Colors.white,
                            ))
                      ]),
                ),
                TextButton(
                  onPressed: () {},
                  child: const Text(
                    "去下单",
                    style: TextStyle(
                        fontSize: 16,
                        color: Colors.red,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ],
            )));
  }

  /// 中间区域
  Widget _center() {
    if (_foodList.isEmpty) {
      return const Center(
        child: CircularProgressIndicator(),
      );
    }
    return SizedBox(
      height: double.infinity,
      width: double.infinity,
      // color: Colors.purple,
      child: Row(
        children: [
          // 左侧
          SizedBox(
              width: 80,
              height: double.infinity,
              // color: Colors.red,
              child: Column(children: _centerLeft())),
          // 右侧
          Expanded(
            flex: 1,
            child: Container(
              height: double.infinity,
              color: Colors.white,
              child: ListView.separated(
                  itemBuilder: (context, index) {
                    List foodsList = _foodList[activeIndex]['foods'];
                    return _foodItem(foodsList[index]);
                  },
                  separatorBuilder: (context, index) {
                    return Container(
                      height: 10,
                      color: Colors.white,
                      width: double.infinity,
                    );
                  },
                  itemCount: _foodList[activeIndex]['foods'].length),
            ),
          )
        ],
      ),
    );
  }

  /// 中间区域左侧
  _centerLeft() {
    return _foodList.map((item) {
      return GestureDetector(
          onTap: () {
            setState(() {
              activeIndex = _foodList.indexOf(item);
            });
          },
          child: Container(
            width: 80,
            height: 60,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: activeIndex == _foodList.indexOf(item)
                  ? Colors.red
                  : Colors.transparent,
            ),
            child: Text(item["name"]),
          ));
    }).toList();
  }

  /// 食品列表项
  _foodItem(food) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10),
      child: Row(
        children: [
          Image.network(
            food['picture'],
            width: 60,
            height: 60,
            fit: BoxFit.cover,
          ),
          Expanded(
              child: Container(
                  padding: const EdgeInsets.only(left: 10),
                  child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          food['name'],
                          style: const TextStyle(
                              fontSize: 16, fontWeight: FontWeight.bold),
                        ),
                        Text(
                          food['description'] ?? "",
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(
                            fontSize: 12,
                            color: Colors.black54,
                          ),
                        ),
                        Text(
                          "¥ ${food['price']}",
                          style: const TextStyle(
                            fontSize: 12,
                            color: Colors.red,
                          ),
                        ),
                      ])))
        ],
      ),
    );
  }
}
